
<template>
  <div style="display: flex;height: 60px;line-height: 60px;border-bottom: 1px solid #ccc;background-color: #79bbff;">
    <div style="width: 60px;color: white;font-width: bold;padding-left: 10px;font-size: 13px;font-size: 25px;">
      <img style="width: 40px;height: 40px; margin-top: 10px;margin-left: 10px;" src="../img/WIN_20231011_11_13_18_Pro.jpg" alt="log">
    </div>
    <span style="font-size: 20px;margin-left: 10px; color: white ">送水管理系统</span>

    <div style="flex:1"></div>
    <div style="width: 100px;padding-top: 20px">
      <el-dropdown>
    <span class="el-dropdown-link" style="color: white">
      <el-icon style="margin-right: -15px; margin-top: 1px"
      ><setting
      /></el-icon>
<!--      个人中心-->
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="logout">注销</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

  <script setup>
  import {Setting} from '@element-plus/icons-vue'
  // import {ref,reactive} from "vue";
  import request from "@/api/request";
  import router from "@/router";
  import { ElMessage } from 'element-plus'

  const logout = () =>{
    request.get('/user/logout').then(resp=>{
      localStorage.clear();
      sessionStorage.clear();
      router.replace('/login');
      ElMessage.success(resp.data);
    })
  }

</script>

<style scoped lang="scss">

</style>